<template>
  <div class="hello">
    汽车品牌是：{{ car.brande }}，价格是：{{ car.price }}万元，数量是：{{ car.num }}台。
    <button @click="updateCar">点击修改汽车信息</button> <br><br><br>
    <ul>
      <li v-for="g in games" :key="g.id">
        游戏名称：{{ g.name }} ，充值价格为： {{ g.price }}元,ID: {{ g.id }}

      </li>
    </ul>
    <button @click="buyGame">点击修改第一个游戏</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
let car = reactive(
  {
    brande: '奔驰',
    price: 100000,
    num: 100,
  }
)
let games = reactive(
  [
    { id: 'MoveCat01', name: '王者荣耀', price: 100 },
    { id: 'MoveCat02', name: '绝地求生', price: 200 },
    { id: 'MoveCat03', name: '英雄联盟', price: 300 },
    { id: 'MoveCat04', name: '刺激战场', price: 400 },
  ]
)

function updateCar() {
  car.brande = '宝马'
  car.price = 200000
  car.num = 200
}

function buyGame() {
  games[0].id = 'MoveCat@@@',
    games[0].name = '王者荣耀111',
    games[0].price = 80000
}


</script>

<style scoped>
.hello li {
  list-style-type: none;
}
</style>
